<template>
  <div class="container">

    <div class="fee-header">
      <mu-flexbox>
        <!-- <mu-flexbox-item class="pd10"> <i class="iconfont icon-user f14"></i>  {{familyPerson.realname}}</mu-flexbox-item> -->
        <mu-flexbox-item>
          <select-role2 @liclick="selectPerson" ref="childRole" ></select-role2>
        </mu-flexbox-item>
      </mu-flexbox>
    </div>

    <div class="fee-main">
      <mu-list>
        <mu-list-item title="本次住院记录" to="/inpatient-care/list-bill">
          <mu-avatar icon=":iconfont icon-zhuyuan" backgroundColor="green" slot="leftAvatar"/>
          <mu-icon value=":iconfont icon-small-arrow-right" slot="right"/>
        </mu-list-item>
        <mu-divider class="mt10"/>
        <mu-list-item title="历史住院记录"  class="mt10" to="/inpatient-care/list-hospitalization-record">
          <mu-avatar icon=":iconfont icon-lishizhuyuanchaxun" backgroundColor="yellow600" slot="leftAvatar"/>
          <mu-icon value=":iconfont icon-small-arrow-right" slot="right"/>
        </mu-list-item>
      </mu-list>
    </div>
    <div class="fee-footer t3 center f12">提示：仅支持查询最近一年内住院费用。</div>
    
  </div>
</template>

<script>
import SelectRole2 from '@/components/SelectRole2'
export default {
  components: {SelectRole2},
  data () {
    return {
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      account: {
        consumptionDetail: [],
        accountBalance: 0
      }
    }
  },
  mounted () {
    // redirect to /improve-user-info
    if (!this.familyPerson.idcard) {
      this.$store.commit('UPDATE_TOAST', {
        message: '请先完善个人信息',
        fn: () => this.$router.replace({
          path: '/setting/improve-user-info',
          query: {redirect: '/inpatient-care/fee'}
        })
      })
      return
    }

    if (this.familyPerson.certificationValidityPeriod !== '1') {
      this.$store.commit('UPDATE_TOAST', {
        message: '请先进行身份认证',
        fn: () => this.$router.replace({
          path: '/setting/bind-visitcard',
          query: {redirect: '/inpatient-care/fee'}
        })
      })
      return
    }
  },
  methods: {
    selectPerson (val) {
      this.familyPerson = val
      sessionStorage.familyPerson = JSON.stringify(val)
    }
  }
}
</script>

<style lang="less" scoped>
 @import '../../common/css/vars.less';
 .fee-header {
   background-image: url(../../assets/images/bgGreen.png);
   background-size: 100%;
   height:150px;
   color: #fff;
 }
.fee-main {
  position: relative;
  top: -110px;
  background: #fff;
  border-radius: 8px;
  padding:3em 2em;
  margin: 1em;
  box-shadow:0 0 5px rgba(0,0,0,.1);
}
.fee-footer {
  position: relative;
  top: -110px;
}
</style>
